<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>AngularJs Bootstrap CRUD</title>
    <link rel="stylesheet" type="text/css" href="http://lib.sinaapp.com/js/bootstrap/3.0.0/css/bootstrap.min.css">
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <div class="container">
        <h3>Users</h3>
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                <th><a href="javascript:;" ng-click="predicate = 'id'; reverse=!reverse" title="orderBy Id">Id</a></th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Edit</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in users | orderBy:predicate:reverse">
                    <td>{{ user.id}}</td>
                    <td>{{ user.fName }}</td>
                    <td>{{ user.lName }}</td>
                    <td>
                        <button class="btn btn-default" ng-click="editUser(user.id)">Edit
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <hr>
        <button class="btn btn-success" ng-click="editUser('new')">Create New User
        </button>
        <hr>
        <h3 ng-show="edit">Create New User:</h3>
        <h3 ng-hide="edit">Edit User:</h3>
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">First Name:</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" ng-model="fName" placeholder="First Name">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Last Name:</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" ng-model="lName" placeholder="Last Name">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Password:</label>
                <div class="col-md-4">
                    <input type="password" class="form-control" ng-model="passw1" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Repeat:</label>
                <div class="col-md-4">
                    <input type="password" class="form-control" ng-model="passw2" placeholder="Repeat Password">
                </div>
            </div>
        </form>
        <hr>
        <button class="btn btn-success" ng-disabled="error || incomplete" ng-click="saveUser()">Save Changes
        </button>
    </div>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('myApp', []).controller('myCtrl', function($scope) {
        $scope.uidIdx = -1;
        $scope.users = [{
            id: 1,
            fName: 'F_Name',
            lName: 'LName'
        }, {
            id: 2,
            fName: 'First Name',
            lName: 'Last Name'
        }, {
            id: 3,
            fName: 'First Name',
            lName: 'Last Name'
        }, {
            id: 4,
            fName: 'First Name',
            lName: 'Last Name'
        }, {
            id: 5,
            fName: 'First Name',
            lName: 'Last Name'
        }, ]

        var empty = "";
        $scope.reset = function() {
            $scope.fName = empty;
            $scope.lName = empty;
            $scope.passw1 = empty;
            $scope.passw2 = empty;
        }
        $scope.reset();

        $scope.edit = true;
        $scope.error = false;
        $scope.incomplete = true;

        $scope.editUser = function(id) {
            if (id == 'new') {
                $scope.edit = true;
                $scope.incomplete = true;
                $scope.reset();
                $scope.uidIdx = -1;
            } else {
                $scope.edit = false;
                $scope.fName = $scope.users[id - 1].fName;
                $scope.lName = $scope.users[id - 1].lName;
                $scope.uidIdx = id - 1;
            }
        }

        $scope.saveUser = function() {
            if ($scope.uidIdx == -1) {
                $scope.users.push({
                    id: $scope.users.length + 1,
                    fName: $scope.fName,
                    lName: $scope.lName
                });
                return;
            }

            $scope.users[$scope.uidIdx].fName = $scope.fName;
            $scope.users[$scope.uidIdx].lName = $scope.lName;
        }

        $scope.$watch('passw1', function() {
            $scope.test();
        });
        $scope.$watch('passw2', function() {
            $scope.test();
        });
        $scope.$watch('fName', function() {
            $scope.test();
        });
        $scope.$watch('lName', function() {
            $scope.test();
        });

        $scope.test = function() {
            if ($scope.passw1 !== $scope.passw2) {
                $scope.error = true;
            } else {
                $scope.error = false;
            }
            $scope.incomplete = false;
            if ($scope.edit && (!$scope.fName.length ||
                    !$scope.lName.length ||
                    !$scope.passw1.length || !$scope.passw2.length)) {
                $scope.incomplete = true;
            }
        }
    })
    </script>
</body>

</html>
